<html>
    <head>
        <title>原型上传</title>
        <link href="https://cdn.jsdmirror.com/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container py5">
            <h1 class="mb-4">上传Axure原型</h1>
            <div class="card">
                <div class="card-body">
                    <form id="uploadForm" action="">
                        <div class="mb-3">
                            <label for="form-label">选择zip</label>
                            <input class="form-control" type="file" name="prototype" value="" accept=".zip" required>
                            
                        </div>
                        <button type="submit" class="btn btn-primary">上传</button>
                    </form>
                    <div id="result" class="mt-3"></div>
                </div>
            </div>
        </div>
        <script>
            document.getElementById('uploadForm').addEventListener('submit', async (e) => {
                e.preventDefault();
                const formData = new FormData();
                formData.append('prototype', e.target.prototype.files[0]);
                
                const resultDiv = document.getElementById('result');
                resultDiv.innerHTML = '<div class="spinner-border"></div> 上传中...';
                
                try {
                    const response = await fetch('/upload', {
                        method: 'POST',
                        body: formData
                    });
                    
                    const data = await response.json();
                    if (response.ok) {
                        resultDiv.innerHTML = `
                            <div class="alert alert-success">
                                上传成功！<a href="/view/${data.id}" class="alert-link">查看原型</a>
                            </div>
                        `;
                    } else {
                        resultDiv.innerHTML = `<div class="alert alert-danger">错误: ${data.error}</div>`;
                    }
                } catch (error) {
                    resultDiv.innerHTML = `<div class="alert alert-danger">请求失败: ${error.message}</div>`;
                }
            });
        </script>
    </body>
    </html>